<template>
	<view class="detail">
		<!-- 这是商品详情页 -->
		<!-- 商品轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image :src="goodsContent.imgUrl" mode="" class="swiper-img"></image>
					<!-- <image src="../../static/img/details/detail1.jpg" mode=""></image> -->
				</view>
			</swiper-item>
		</swiper>
		<!-- 价格和名称 -->
		<view class="details-goods">
			<view class="goods-price_new">￥{{goodsContent.price_new}}</view>
			<view class="goods-price_old">￥{{goodsContent.price_old}}</view>
			<view class="goods-name">{{goodsContent.name}}</view>
		</view>
		<!-- 商品详情图 -->
		<view class="">
			<view class="">
				<image src="../../static/img/details/details1.jpeg" mode="" class="detail-img"></image>
				<image src="../../static/img/details/details2.jpeg" mode="" class="detail-img"></image>
				<image src="../../static/img/details/details3.jpeg" mode="" class="detail-img"></image>
				<image src="../../static/img/details/detail1.jpg" mode="" class="detail-img"></image>
				<image src="../../static/img/details/detail5.jpg" mode="" class="detail-img"></image>
			</view>
		</view>
		<!-- 看了又看 -->
		<Card cardTitle="看了又看"></Card>
		<CommodityList :data="dataList"></CommodityList>
		<!-- 底部 -->
		<view class="detail-foot">
			<view class="iconfont icon-qipao"></view>
			<view class="iconfont icon-gouwuche" @click="goShopcart"></view>
			<view class="add-shopcart" @click="showPop">加入购物车</view>
			<view class="purchase" @click="showPop">立即购买</view>
		</view>

		<!-- 底部弹出层 -->
		<view class="pop" v-show="isShow" @touchmove.stop.prevent=''>
			<!-- 蒙层 -->
			<view class="pop-mask" @click="hidePop"></view>
			<!-- 内容块  -->
			<view class="pop-box" :animation="animationData">
				<view class="">
					<image class="pop-img" :src="goodsContent.imgUrl" mode=""></image>
				</view>
				<view class="pop-num">
					<view class="">购买数量</view>
					<UniNumberBox :value="num" @change="changeNum">
					</UniNumberBox>
				</view>
				<view class="pop-sub" @click="addShopCart">确定</view>
			</view>
		</view>
	</view>

</template>

<script>
	import card from "@/components/common/card.vue";
	import commodityList from "@/components/common/commodityList.vue";
	import uniNumberBox from "@/components/uni/uni-number-box/uni-number-box.vue";
	import {mapMutations} from "vuex";
	export default {
		components: {
			Card: card,
			CommodityList: commodityList,
			UniNumberBox:uniNumberBox
		},
		data() {
			return {
				// 底部弹出层是否弹出
				isShow: false,
				num: 1,
				goodsContent:{},
				swiperList: [{
						imgUrl: '../../static/img/details/detail2.jpg'
					},
					{
						imgUrl: '../../static/img/details/detail3.jpg'
					},
					{
						imgUrl: '../../static/img/details/detail4.jpg'
					}
				],
				dataList: [{
					id: 1,
					imgUrl: "../../static/img/commodity1.jpg",
					name: "精致羽绒服2022款精致羽绒服2022款精致羽绒服2022款精致羽绒服2022款",
					price_new: "299",
					price_old: "599",
					discount: "5.2",
				}, {
					id: 2,
					imgUrl: "../../static/img/commodity2.jpg",
					name: "精致羽绒服2022款精致羽绒服2022款精致羽绒服2022款精致羽绒服2022款",
					price_new: "299",
					price_old: "599",
					discount: "5.2",
				}, {
					id: 3,
					imgUrl: "../../static/img/commodity3.jpg",
					name: "精致羽绒服2022款精致羽绒服2022款精致羽绒服2022款精致羽绒服2022款",
					price_new: "299",
					price_old: "599",
					discount: "5.2",
				}, {
					id: 4,
					imgUrl: "../../static/img/commodity4.jpg",
					name: "精致羽绒服2022款精致羽绒服2022款精致羽绒服2022款精致羽绒服2022款",
					price_new: "299",
					price_old: "599",
					discount: "5.2",
				}],
				animationData: {}
			}
		},
		onLoad(e) {
			// console.log(e.id);
			this.getData(e.id);
		},
		onNavigationBarButtonTap(e) {
			// console.log(e);
			if (e.type=="share") {
				uni.share({
					// 分享服务提供商（即weixin|qq|sinaweibo），通过 uni.getProvider 获取可用的分享服务商，可用是指在manifest.json的sdk配置中配的分享sdk厂商，与本机安装了什么社交App无关
					"provider":"weixin",
					// 分享形式，0	图文
					"type":0,
					//场景: provider 为 weixin 时必选,
					"scene":"WXSceneSession",
					"title":this.goodsContent.name,
					// 跳转链接
					"href":"http://localhost:8080/#/pages/details/details?id="+this.goodsContent.id+"",
					"imageUrl":this.goodsContent.imgUrl,
					success: (res) => {
						uni.showToast({
							title:"分享成功"
						})
					},
					fail: (err) => {
						console.log("fail:"+ JSON.stringify(err));
					}
				})
			}
		},
		// 修改返回键默认行为
		onBackPress() {
			if (this.isShow) {
				this.isShow = false;
				return true;
			}
			
		},
		methods: {
			// 请求数据
			getData(id){
				// console.log(id);
				this.$http.request({
					url:'/goods/id',
					data:{
						id:id
					}
				}).then((res)=>{
					// console.log(JSON.stringify(res));
					this.goodsContent = res[0];
					// console.log(this.goodsContent);
				}).catch(()=>{
					uni.showToast({title: '获取数据失败'})
				})
			},
			// 显示蒙层
			showPop() {
				// 加入动画效果
				var animation = uni.createAnimation({
					// 动画持续时间，单位ms
					duration: 100,
				});
				// this.animation = animation;
				// 偏移,translateY	ty	在Y轴偏移ty，单位px
				// 调用动画操作方法后要调用 step() 来表示一组动画完成
				animation.translateY(600).step();
				// 赋值， export 方法每次调用后会清掉之前的动画操作
				this.animationData = animation.export();
				this.isShow = true;
				setTimeout(() => {
					animation.translateY(0).step();
					this.animationData = animation.export();
				}, 100)

			},
			// 隐藏蒙层
			hidePop() {
				// 加入动画效果
				var animation = uni.createAnimation({
					duration: 100,
				});
				animation.translateY(600).step();
				this.animationData = animation.export();
				setTimeout(() => {
					this.isShow = false;
				}, 200)
			},
			// 改变商品购买数量
			changeNum(value){
				// console.log(value);
				this.num = value;
			},
			// 跳转至购物车页面
			goShopcart(){
				uni.switchTab({
					url:'/pages/shopCart/shopCart'
				})
			},
			...mapMutations(['addToShopCart']),
			// 添加商品至购物车
			addShopCart(){
				let goods = this.goodsContent;
				this.goodsContent['checked'] = false;
				this.goodsContent['num'] = this.num;
				// console.log(goods);
				// 加入购物车
				this.addToShopCart(goods);
				// 隐藏弹出框
				this.hidePop();
			}
		}
	}
</script>

<style scoped>
	.show {
		transition: all 3s ease;
		transform: translateY(0%) !important;
	}

	.detail {
		padding-bottom: 90rpx;
	}

	swiper {
		width: 100%;
		height: 700rpx;
	}

	.swiper-img {
		width: 100%;
		height: 700rpx;
	}

	.details-goods {
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		padding: 10rpx;
	}

	.detail-img {
		width: 100%;
	}

	.detail-foot {
		display: flex;
		justify-content: center;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		align-items: center;
		background-color: #FFFFFF;
		border-top: 2rpx solid #f7f7f7;
	}

	.detail-foot .iconfont {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100%;
		background-color: #ffffff;
		border-style: inset;
		border-style: solid;
		border-width: 2rpx;
		border-color: #e1e1e1;
		color: #000000;
		text-align: center;
		margin: 0 20rpx;
	}

	.add-shopcart {
		margin: 0 30rpx 0 70rpx;
		padding: 6rpx 30rpx;
		background-color: #ffffff;
		border-style: solid;
		border-width: 1rpx;
		border-color: #e1e1e1;
		font-weight: bold;
		color: #bababa;
		border-radius: 40rpx;
	}

	.purchase {
		margin: 0 40rpx;
		padding: 6rpx 30rpx;
		background-color: #49BDFB;
		border-width: 1rpx;
		color: #FFFFFF;
		font-weight: bold;
		border-radius: 40rpx;
	}

	.pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.pop-mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.pop-box {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		/* height: 400px; */
		background-color: #FFFFFF;
	}
	.pop-img{
		width: 260rpx;
		height: 260rpx;
	}
	.pop-num{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.pop-sub{
		line-height: 80rpx;
		background-color: #49BDFB;
		color: #FFFFFF;
		text-align: center;
	}
</style>
